import React, { forwardRef } from 'react';
import StatusBar from '../status-bar/status-bar';
import TrafficCapacityChart from '../traffic-capacity-chart/traffic-capacity-chart';
import type { TrafficCapacityChartProps } from '../traffic-capacity-chart/traffic-capacity-chart';
import './index.scss';

export interface TrafficCapacityPanelProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  /**
   * 状态栏配置
   */
  statusBar?: {
    title?: string;
    subtitle?: string;
  };
  /**
   * 交通运力图表配置
   */
  trafficChart?: TrafficCapacityChartProps;

  __designMode?: boolean;
}

const TrafficCapacityPanel = forwardRef<HTMLDivElement, TrafficCapacityPanelProps>(({
  className = '',
  style = {},
  width,
  height,
  noResponsiveScale = true,
  statusBar = {},
  trafficChart = {},
  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `traffic-capacity-panel ${className}`.trim();
  const customStyle: React.CSSProperties = {
    ...style,
    width: '500px',
    height: '388px'
  };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  // 构建类名，包含响应式缩放控制
  const finalClassName = [
    combinedClassName,
    noResponsiveScale ? 'no-responsive-scale' : ''
  ].filter(Boolean).join(' ');


  return (
    <div
      ref={ref}
      className={finalClassName}
      style={customStyle}
      {...otherProps}
    >
      {/* 状态栏 */}
      <StatusBar
        chineseText={statusBar.title || "各类交通方式小时运力图"}
        englishText={statusBar.subtitle || "ENFORCEMENT"}
        iconUrl="/static/images/yingjiguanli/编组 31.png"
        noResponsiveScale={noResponsiveScale}
      />

      {/* 主要内容区域 */}
      <div className="traffic-capacity-panel-content">
        {/* 交通运力图表 */}
        <div className="chart-section">
          <TrafficCapacityChart
            {...trafficChart}
            __designMode={__designMode}
          />
        </div>
      </div>
    </div>
  );
});

TrafficCapacityPanel.displayName = 'TrafficCapacityPanel';

export default TrafficCapacityPanel;